<template>
	<div class="layout-padding">
		<el-card shadow="hover" style="overflow-y: auto">
			<div class="mb15">
				<el-form label-width="90px" size="default">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="创建时间：">
								<el-date-picker v-model="rangeTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="部门名称：">
								<el-input v-model="formData.Name" style="max-width: 180px" clearable> </el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="mb15">
				<el-button size="default" type="primary" plain @click="loadData()"
					><el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
			</div>
			<el-table :data="tableData.data" @selection-change="(selection:any[])=>tableData.selection=selection" row-key="Id">
				<el-table-column prop="Name" label="部门名称"> </el-table-column>
				<el-table-column prop="Desc" label="部门描述"> </el-table-column>
				<el-table-column prop="Status" label="部门状态">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.Status">启用</el-tag>
						<el-tag type="info" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="SysCreateTime" label="创建时间"></el-table-column>
				<el-table-column label="操作" width="120" align="center">
					<template #default="scope">
						<PermissionButton
							size="small"
							text
							type="success"
							@click="onEdit(0, scope.row.ParentId)"
							style="margin-left: 12px"
							label="新增平级部门"
							name="Add"
						></PermissionButton>
						<PermissionButton size="small" text type="primary" @click="onEdit(0, scope.row.Id)" label="新增下级部门" name="Add"></PermissionButton>
						<PermissionButton size="small" text type="warning" @click="onEdit(scope.row.Id, scope.row.ParentId)" label="修改" name="Edit"></PermissionButton>
						<PermissionButton size="small" text type="danger" @click="onRemove(scope.row.Id)" label="删除" name="Delete"></PermissionButton>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<EditDialog ref="refEdit" @refresh="loadData()" />
	</div>
</template>

<script setup lang="ts">
import { Ref,ref, onMounted } from 'vue';
import EMsg from '/@/common/eMsg';
import EditDialog from './edit.vue';
import PermissionButton from '/@/components/permissionButton/index.vue';
import { Post } from '/@/common/http';

const refEdit = ref();
const rangeTime = ref([]);
const formData = ref({
	PageIndex: 1,
	PageSize: 50,
	StartQueryTime: null,
	EndQueryTime: null,
	Name: '',
});
const tableData: Ref = ref({
	data: [],
	selection: [],
	total: 0,
});

const loadData = () => {
	if (rangeTime.value!.length == 2) {
		formData.value.StartQueryTime = rangeTime.value[0];
		formData.value.EndQueryTime = rangeTime.value[1];
	}
	Post('SysDept/GetDepts', formData.value, (res: any) => {
		tableData.value.data = res.Data;
	});
};

const onEdit = (id: number, parentId: number) => {
	refEdit.value.onShow(id, parentId);
};

const onRemove = (id: number) => {
	EMsg.confirm(`确定删除该数据？`, () => {
		Post('SysDept/RemoveDept', { Id: id }, (res: any) => {
			EMsg.success(res.Msg);
			loadData();
		});
	});
};

onMounted(() => {
	loadData();
});
</script>
